<template>
	<div class="pages">
		<div class="item_detail">
			<div class="top">
				<div class="item1">订单流程</div>
			</div>
			<el-steps :active="is_active" align-center>
				<el-step title="合同通过"
					:description="dataForm.coupons.hetong_num?dataForm.coupons.create_time:''"></el-step>
				<el-step title="配货中"
					:description="dataForm.order_info.pay?dataForm.order_info.pay.pay_end_time:''"></el-step>
				<el-step title="已发货" :description="this.dataForm.order.send_time"></el-step>
				<el-step title="验收" :description="dataForm.order_info.shouhuo"></el-step>
			</el-steps>
		</div>
		<el-form :model="dataForm" size="small" :rules="rules" ref="dataForm" label-width="150px" class="demo-ruleForm">
			<!-- 			<div class="item_detail">
				<div class="top">
					<div class="item1">订单信息</div>
				</div>
				<div class="item_table">
					<div class="item_form item_left">
						<el-form-item label="订单号">
							<el-input v-model="dataForm.order.order_sn" placeholder="订单号" disabled></el-input>
						</el-form-item>
						<el-form-item label="订单状态">
							<el-select v-model="dataForm.order.status" placeholder="请选择" clearable disabled
								style="width: 100%;">
								<el-option v-for="item in stateList" :key="item.status" :label="item.title"
									:value="item.status">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="创建时间">
							<el-date-picker v-model="dataForm.order.create_time" type="datetime" placeholder="创建时间"
								disabled style="width: 100%;">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="发货信息">
							<el-input v-model="dataForm.order.send_text" placeholder="发货信息" disabled></el-input>
						</el-form-item>
					</div>
					<div class="item_form item_right">
						<el-form-item label="发货时间">
							<el-date-picker v-model="dataForm.order.send_time" type="datetime" placeholder="发货时间"
								disabled style="width: 100%;">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="发货附件">
							<uploadImg :limit="1" url="/api/publics/upload" title="" accept="image/*,.pdf"
								@saveImgs="saveImg1" size="10">
							</uploadImg>
						</el-form-item>
						<el-form-item>
							<el-image style="width: 100px; height: 100px"
								:src="url+dataForm.order.send_fujian"></el-image>
						</el-form-item>
					</div>
				</div>
			</div> -->
			<div class="item_detail" v-if="dataForm.order">
				<div class="top">
					<div class="item1">需求信息</div>
				</div>
				<div class="item_table">
					<div class="item_form item_left">
						<el-form-item label="需求类型">
							<el-select v-model="dataForm.order.level" placeholder="请选择" clearable style="width: 100%;"
								disabled>
								<el-option v-for="item in xqList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="需求名称">
							<el-input v-model="dataForm.order.title" placeholder="需求名称"></el-input>
						</el-form-item>
						<el-form-item label="联系人">
							<el-input v-model="dataForm.order.contact" placeholder="联系人"></el-input>
						</el-form-item>
					</div>
					<div class="item_form item_right">
						<el-form-item label="联系电话">
							<el-input v-model="dataForm.order.mobile" placeholder="联系电话"></el-input>
						</el-form-item>
						<el-form-item label="项目描述" v-if="dataForm.order.level==1">
							<el-input type="textarea" v-model="dataForm.order.content" placeholder="项目描述"></el-input>
						</el-form-item>
						<el-form-item label="项目描述" v-if="dataForm.order.level==3">
							<el-input type="textarea" v-model="dataForm.order.xiangmu" placeholder="项目描述"></el-input>
						</el-form-item>
					</div>
				</div>

				<div class="hr_xian" style="margin: 20px auto 30px;" v-if="dataForm.order.level==2"></div>
				<div class="item_table" v-if="dataForm.order.level==2">
					<div class="item_form item_left">
						<el-form-item label="物资名称">
							<el-input v-model="dataForm.order.wuzi" placeholder="物资名称"></el-input>
						</el-form-item>
						<el-form-item label="期望交付时间">
							<el-date-picker v-model="dataForm.order.jiaofu_time" type="datetime" placeholder="期望交付时间"
								style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</div>
					<div class="item_form item_right">
						<el-form-item label="型号和规则">
							<el-input v-model="dataForm.order.xinghao" placeholder="型号和规则"></el-input>
						</el-form-item>
						<el-form-item label="采购数量">
							<el-input type="number" v-model="dataForm.order.c_num" placeholder="采购数量"></el-input>
						</el-form-item>
					</div>
				</div>

				<div class="hr_xian" style="margin: 20px auto 30px;" v-if="dataForm.order.level==3"></div>
				<div class="item_table" v-if="dataForm.order.level==3">
					<div class="item_form item_left">
						<el-form-item label="需要完成时间">
							<el-date-picker v-model="dataForm.order.end_time" type="datetime" placeholder="需要完成时间"
								style="width: 100%;">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="需求说明">
							<el-input v-model="dataForm.order.jiagong" placeholder="需求说明"></el-input>
						</el-form-item>
					</div>
					<div class="item_form item_right">
						<el-form-item label="数量">
							<el-input v-model="dataForm.order.j_num" placeholder="数量"></el-input>
						</el-form-item>
						<el-form-item label="图纸">
							<uploadImg :limit="1" url="/api/publics/upload" title="" accept="image/*,.pdf,.zip,.rar"
								@saveImgs="saveImg1" size="20" :img="img2">
							</uploadImg>
						</el-form-item>
					</div>
				</div>


			</div>
			<div class="item_detail" v-if="dataForm.order_info">
				<div class="top">
					<div class="item1">企业信息</div>
				</div>
				<div class="item_table">
					<div class="item_form item_left">
						<el-form-item label="企业名称">
							<el-input v-model="dataForm.order_info.corp_name" placeholder="企业名称" disabled></el-input>
						</el-form-item>
						<el-form-item label="所在地区">
							<el-cascader :options="regionData" v-model="addressArr" @change="handleChange"
								placeholder="请选择省市区" style="width: 100%;" disabled></el-cascader>
						</el-form-item>
						<el-form-item label="企业实际住所">
							<el-input v-model="dataForm.order_info.corp_address" placeholder="企业实际住所"
								disabled></el-input>
						</el-form-item>
					</div>
					<div class="item_form item_right">
						<el-form-item label="联系人">
							<el-input v-model="dataForm.order_info.corp_contact" placeholder="联系人" disabled></el-input>
						</el-form-item>
						<el-form-item label="联系电话">
							<el-input v-model="dataForm.order_info.corp_mobile" placeholder="联系电话" disabled></el-input>
						</el-form-item>
					</div>
				</div>
			</div>
			<div class="item_detail" v-if="dataForm.order_info.factory_name">
				<div class="top">
					<div class="item1">工厂信息</div>
				</div>
				<div class="item_table">
					<div class="item_form item_left">
						<el-form-item label="工厂名称">
							<el-input v-model="dataForm.order_info.factory_name" placeholder="工厂名称"></el-input>
						</el-form-item>
						<el-form-item label="工厂地址">
							<el-input v-model="dataForm.order_info.factory_address" placeholder="工厂地址"></el-input>
						</el-form-item>
						<el-form-item label="联系人">
							<el-input v-model="dataForm.order_info.factory_contact" placeholder="联系人"></el-input>
						</el-form-item>
					</div>
					<div class="item_form item_right">
						<el-form-item label="联系电话">
							<el-input v-model="dataForm.order_info.factory_mobile" placeholder="联系电话"></el-input>
						</el-form-item>
					</div>
				</div>
			</div>
			<div class="item_detail" v-if="dataForm.coupons.hetong_num">
				<div class="top">
					<div class="item1">创制券信息</div>
				</div>
				<div class="item_table">
					<div class="item_form item_left">
						<el-form-item label="合同金额(元)">
							<el-input type="number" v-model="dataForm.coupons.hetong_num"
								placeholder="合同金额(元)"></el-input>
						</el-form-item>
						<el-form-item label="服务费用(元)">
							<el-input type="number" v-model="dataForm.coupons.fuwu_num"
								placeholder="服务费用(元)"></el-input>
						</el-form-item>
						<el-form-item label="创制券申请额度(元)">
							<el-input type="number" v-model="dataForm.coupons.coupons_num"
								placeholder="创制券申请额度(元)"></el-input>
						</el-form-item>
					</div>
					<div class="item_form item_right">
						<el-form-item label="合同上传时间">
							<el-date-picker v-model="dataForm.coupons.create_time" type="datetime" placeholder="合同上传时间"
								style="width: 100%;">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="合同文件">
							<uploadImg :limit="1" url="/api/publics/upload" title="" accept="image/*,.pdf,.zip,.rar"
								@saveImgs="saveImg2" size="20" :img="img3">
							</uploadImg>
						</el-form-item>
					</div>
				</div>
			</div>
			<div class="item_detail" v-if="dataForm.order_info.pay">
				<div class="top">
					<div class="item1">打款信息</div>
				</div>
				<div class="item_table">
					<div class="item_form item_left">

						<el-form-item label="打款信息">
							<el-input v-model="dataForm.order.payment_text" placeholder="打款信息"></el-input>
						</el-form-item>
						<el-form-item label="打款凭证">
							<!-- <el-button type="primary" size="small" v-if="dataForm.order.payment_voucher">
								<el-link :href="url+dataForm.order.payment_voucher" target="_blank" style="color: #fff;"
									:underline="false">点击查看</el-link>
							</el-button> -->
							<uploadImg :limit="1" url="/api/publics/upload" title="" accept="image/*,.pdf,.zip,.rar"
								@saveImgs="saveImg3" size="20" :img="img4">
							</uploadImg>
						</el-form-item>
					</div>
					<div class="item_form item_right">
						<el-form-item label="上传时间">
							<el-date-picker v-model="dataForm.order_info.pay.pay_time" type="datetime"
								placeholder="发货时间" style="width: 100%;">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="确认时间">
							<el-date-picker v-model="dataForm.order_info.pay.pay_end_time" type="datetime"
								placeholder="发货时间" style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</div>
				</div>
			</div>
			<div class="item_detail" v-if="dataForm.order.send_time">
				<div class="top">
					<div class="item1">发货信息</div>
				</div>
				<div class="item_table">
					<div class="item_form item_left">
						<el-form-item label="发货信息">
							<el-input v-model="dataForm.order.send_text" placeholder="发货信息"></el-input>
						</el-form-item>
						<el-form-item label="打款凭证">
							<uploadImg :limit="1" url="/api/publics/upload" title="" accept="image/*,.pdf,.zip,.rar"
								@saveImgs="saveImg4" size="20" :img="img5">
							</uploadImg>
						</el-form-item>
					</div>
					<div class="item_form item_right">
						<el-form-item label="发货时间">
							<el-date-picker v-model="dataForm.order.send_time" type="datetime" placeholder="发货时间"
								style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</div>
				</div>
			</div>
			<div style="text-align: right;">
				<el-button size="small" @click="$router.go(-1)">返回</el-button>
				<el-button type="primary" size="small" @click="edit">编辑</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import {
		provinceAndCityData,
		regionData,
		rovinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from "element-china-area-data"
	export default {
		data() {
			return {
				regionData,
				TextToCode,
				img2: '',
				img3: '',
				img4: '',
				img5: '',
				url: '',
				dataForm: {},
				stateList: [],
				addressArr: [],
				rules: {

				},
				xqList: [{
					value: 1,
					label: '设计研发需求'
				}, {
					value: 2,
					label: '物资采购需求'
				}, {
					value: 3,
					label: '加工制造需求'
				}],
				is_active: null,
			}
		},
		components: {
			uploadImg
		},
		methods: {
			handleChange(value) {
				if (value) {
					this.dataForm.order_info.corp_provinceId = value[0]
					this.dataForm.order_info.corp_cityId = value[1]
					this.dataForm.order_info.corp_areaId = value[2]
				}
			},
			getStateList() {
				this.$http.post('/api/publics/status_list', {}).then(res => {
					this.stateList = res.result
				})
			},
			getStateName(e) {
				let aa = this.stateList.find(res => {
					return res.status == e
				})
				return aa.title
			},
			saveImg1(e) {
				this.dataForm.order.thumb = e
			},
			saveImg2(e) {
				this.dataForm.coupons.thumb = e
			},
			saveImg3(e) {
				this.dataForm.order.payment_voucher = e
			},
			saveImg4(e) {
				this.dataForm.order.send_fujian = e
			},
			getInfo() {
				this.$loading()
				this.$http.post(`/api/order/edit`, {
					id: this.$route.query.id
				}).then(res => {
					this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
					if (this.dataForm.order.thumb) {
						this.img2 = {
							name: '图纸',
							url: process.env.VUE_APP_BASE_API + this.dataForm.order.thumb
						}
					}
					if (this.dataForm.coupons) {
						if (this.dataForm.coupons.thumb) {
							this.img3 = {
								name: '合同文件',
								url: process.env.VUE_APP_BASE_API + this.dataForm.coupons.thumb
							}
						}
					}
					if (this.dataForm.order.payment_voucher) {
						this.img4 = {
							name: '打款凭证',
							url: process.env.VUE_APP_BASE_API + this.dataForm.order.payment_voucher
						}
					}
					if (this.dataForm.order.send_fujian) {
						this.img5 = {
							name: '发货附件',
							url: process.env.VUE_APP_BASE_API + this.dataForm.order.send_fujian
						}
					}
					if (res.result.order_info.corp_provinceId && res.result.order_info.corp_cityId && res.result
						.order_info.corp_areaId) {
						this.addressArr = [String(res.result.order_info.corp_provinceId), String(res.result
								.order_info.corp_cityId),
							String(res.result.order_info.corp_areaId)
						]
					} else {
						this.addressArr = []
					}
					
					if (this.dataForm.coupons.hetong_num && this.dataForm.order_info.pay && this
						.dataForm.order
						.send_time && this.dataForm.order_info
						.shouhuo) {
						this.is_active = 4
					} else if (this.dataForm.coupons.hetong_num && this.dataForm.order_info
						.pay && this.dataForm.order.send_time) {
						this.is_active = 3
					} else if (this.dataForm.coupons.hetong_num && this.dataForm.order_info
						.pay) {
						this.is_active = 2
					} else if (this.dataForm.coupons.hetong_num) {
						this.is_active = 1
					} else {
						this.is_active = null
					}
					
				})
			},
			edit() {
				this.$confirm('确定编辑！', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$loading()
					console.log(1)
					let data = {
						is_post:1,
						corp_name: this.dataForm.order_info.corp_name, //企业名称
						corp_provinceId: this.dataForm.order_info.corp_provinceId, //省
						corp_cityId: this.dataForm.order_info.corp_cityId, // 市
						corp_areaId: this.dataForm.order_info.corp_areaId , //区
						corp_address: this.dataForm.order_info.corp_address, //企业实际住所
						corp_contact: this.dataForm.order_info.corp_contact, //联系人
						corp_mobile: this.dataForm.order_info.corp_mobile, //联系电话
						factory_name: this.dataForm.order_info.factory_name, //工厂名称
						factory_address: this.dataForm.order_info.factory_address, //工厂地址
						factory_contact: this.dataForm.order_info.factory_contact, //联系人
						factory_mobile: this.dataForm.order_info.factory_mobile, //联系电话
						level: this.dataForm.order.level,
						title: this.dataForm.order.title,
						contact: this.dataForm.order.contact,
						mobile: this.dataForm.order.mobile,
						content: this.dataForm.order.content,
						wuzi: this.dataForm.order.wuzi,
						jiaofu_time: this.dataForm.order.jiaofu_time,
						xinghao: this.dataForm.order.xinghao,
						c_num: this.dataForm.order.c_num,
						end_time: this.dataForm.order.end_time,
						jiagong: this.dataForm.order.jiagong,
						j_num: this.dataForm.order.j_num,
						thumb: this.dataForm.order.thumb,
						xiangmu: this.dataForm.order.xiangmu,
						hetong_num: !this.dataForm.coupons.hetong_num?'':this.dataForm.coupons.hetong_num,
						fuwu_num: !this.dataForm.coupons.fuwu_num?'':this.dataForm.coupons.fuwu_num,
						coupons_num: !this.dataForm.coupons.coupons_num?'':this.dataForm.coupons.coupons_num,
						coupons_create_time: !this.dataForm.coupons.create_time?'':this.dataForm.coupons.create_time,
						coupons_thumb: !this.dataForm.coupons.thumb?'':this.dataForm.coupons.thumb,
						payment_voucher: this.dataForm.order.payment_voucher,
						payment_text: this.dataForm.order.payment_text,
						pay_time: this.dataForm.order_info.pay?this.dataForm.order_info.pay.pay_time:'',
						pay_end_time: this.dataForm.order_info.pay?this.dataForm.order_info.pay.pay_end_time:'',
						send_text: this.dataForm.order.send_text,
						send_time: this.dataForm.order.send_time,
						send_fujian: this.dataForm.order.send_fujian,
					}
					console.log(data)
					this.$http.post('/api/order/edit', data).then(res => {
						this.$closeLoading()
						this.$message({
							message: res.msg,
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getInfo()
							}
						});
					})
				}).catch(() => {});
			}
		},
		created() {
			this.url = process.env.VUE_APP_BASE_API
			this.getStateList()
			this.getInfo()
			this.addressArr = []
		}
	}
</script>
<style scoped lang="scss">
	.item_detail {
		margin-bottom: 20px;
		background-color: #fff;
		padding: 20px 25px;

		.top {
			margin-bottom: 20px;
		}
	}

	.pages {
		background: transparent;
		padding: 0;
	}

	.item_table {
		display: flex;
		padding: 0 150px 0 50px;

		.item_left {
			// padding-right: 200px;
		}

		.item_form {
			flex: 1;
			// padding:0 50px;
		}
	}
</style>